<!--
 * @Author: Bennty
 * @Date: 2024-11-26 15:34:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-27 13:31:18
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="添加新工序" width="30%" @close="handleClose">
        <el-form ref="formRef" :model="formData" label-width="auto">
            <el-form-item label="工序名称" prop="workName">
                <el-input style="width: 80%" v-model="formData.workName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input style="width: 80%" v-model.number="formData.price" placeholder="请输入" type="number"></el-input>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
                <el-input style="width: 80%" v-model="formData.unit" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="工期" prop="constructionPeriod">
                <el-input style="width: 80%" v-model.number="formData.constructionPeriod" type="number" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="添加外协厂">
                <el-select style="width: 80%" v-model="formData.supplyJoinWorkProcedures" multiple clearable filterable value-key="id" placeholder="请选择">
                    <el-option v-for="item in props.factorys" :key="item.id" :value="item" :label="item.companyName"></el-option>
                </el-select>
            </el-form-item>
            <div class="factorys flex gap-2">
                <el-tag v-for="item in formData.supplyJoinWorkProcedures" :key="item.id">{{ item.companyName }}</el-tag>
            </div>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleClickSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { Form } from '@/api/sj/purchaseManagement/processManagement/types';
import type { FormInstance } from 'element-plus';
import { addProcessApi } from '@/api/sj/purchaseManagement/processManagement/index';

const props = defineProps<{
    visible: boolean,
    formModel: Form,
    factorys: any[],

}>();
const emits = defineEmits(['close','submit']);

const formRef = ref<FormInstance>();
const formData = ref<Form>({});

watch(()=>props.formModel, (newData)=>{
    formData.value = {...newData};
});

const handleClickSubmit = async () => {
    const factoryData = formData.value.supplyJoinWorkProcedures?.map((item: any, index: number)=>{
        return {
            supplyFactoriesId: item.id,
            sort: index + 1
        }
    });
    const submitData = {
        ...formData.value,
        supplyJoinWorkProcedures: factoryData,
        workStatus: 1
    }
    const { code } = await addProcessApi(submitData);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit', false);
    };
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};

</script>

<style scoped>

</style>